<template>
    <sky-base-page padding="0" bgPageColor="#f3f8f5">
        <view class="header-box">
            <view class="left-box">
                <view class="hello">hello!</view>
                <view class="desc">欢迎登录帮帮陌</view>
            </view>
            <image class="logo-phone" src="/static/logo.png"/>
        </view>
        <view class="form-card">
        <uni-forms class="bang-form" ref="formRef" :model="form" :rules="rules" label-position="top"
                   label-width="400rpx" err-show-type="toast">
            <uni-forms-item name="account" label="账号" required>
                <view class="input-box">
                    <input type="text" v-model="form.account" placeholder="请输入账号"/>
                </view>
            </uni-forms-item>
            <uni-forms-item name="password" label="密码" required>
                <view class="input-box">
                    <input type="password" v-model="form.password" placeholder="请输入密码"/>
                </view>
            </uni-forms-item>
            <view class="login-btn"  @click="qly.form.pass(submit,formRef)">
                登 录
            </view>
        </uni-forms>
        </view>
    </sky-base-page>

</template>
<script setup>

const formRef = ref()
const form = ref({
    account: '',
    password: '',
    deviceType:'h5'
})

const rules = {
    // 对name字段进行必填验证
    account: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: '请输入账号',
            },
        ],
    },
    password: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: '请输入密码',
            },
        ],
    }
}

// 登录
const submit = async () => {
    const newForm = qly.tool.deepCopy(form.value)
    console.log('newForm', newForm)
    newForm.password = qly.auth.encryptPassword(newForm.password)
    
    const res = await qly.api.auth.login(newForm)
    if (res.success) {
        qly.dialog.success('登录成功')
        await qly.auth.handleLoginResult(res)
        uni.reLaunch({
            url: '/pages/tabBar/home/index'
        })
    } else {
        qly.dialog.apiError(res).catch()
    }
}

</script>
<style lang="scss" scoped>
.header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 400rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    
    .left-box {
        .hello {
            font-family: D-DIN-DIN, D-DIN-DIN;
            font-weight: bold;
            font-size: 80rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            color: #293845;
        }
        
        .desc {
            color: #293845;
            font-weight: bold;
            font-size: 34rpx;
        }
    }
    
    .logo-phone {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
    }
}

.form-card{
    width: 92%;
    margin: -40rpx auto 0;
    padding: 32rpx;
    box-sizing: border-box;
    border-radius: 18rpx;
    background-color: #fff;
}

.bang-form {
    flex: 1;
    overflow: auto;
}

.yuan-phone {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.login-btn {
    color: #fff;
    margin-top: 200rpx;
    width: 590rpx;
    height: 96rpx;
    background: #00C76A;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 30rpx;
}
.input-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48rpx 0 24rpx;
    width: 100%;
    height: 80rpx;
    background: #F5F5F5;
    border-radius: 16rpx;
    font-size: 32rpx;
    .code-box{
        margin-right: 50rpx;
    }
}
</style>
